/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {View, Image} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {
  MainScreen,
  VideoScreen,
  WorksheetScreen,
  WorksheetDetailScreen,
  LoginScreen,
  GroupScreen,
  WorksheetAddScreen,
  CustomerSelector,
  EquipmentSelector,
  MeScreen,
  UserInfoScreen,
  ChangePasswordScreen,
  RegisterScreen,
  ForgetScreen,
  ChangeMobile,
} from './screens';
import {
  Router,
  Stack,
  Scene,
  Modal,
  Actions,
  Tabs,
} from 'react-native-router-flux';
import {Icon, Button} from 'react-native-elements';
import Api from './Api';
import TabbarGroup from './assets/tabbar_group.png';
import TabbarGroupPre from './assets/tabbar_group_pre.png';
import TabbarAnalyTics from './assets/tabbar_analytics.png';
import TabbarAnalyTicsPre from './assets/tabbar_analytics_pre.png';
import TabbarMe from './assets/tabbar_me.png';
import TabbarMePre from './assets/tabbar_me_pre.png';

const App = () => {
  return (
    <Router
      titleStyle={{
        color: Colors.white,
      }}
      backButtonTintColor="#fff"
      backButtonTextStyle={{
        color: Colors.white,
      }}
      navigationBarStyle={{
        backgroundColor: '#5196FD',
      }}>
      <Stack key="modalroot" hideNavBar>
        <Modal>
          <Stack key="root" hideNavBar>
            <Tabs activeTintColor="#5196FD" inactiveTintColor="#333" hideNavBar>
              <Scene
                key="group"
                component={GroupScreen}
                title="工单管理"
                icon={({focused}) => (
                  <Image
                    style={{width: 22, height: 22}}
                    source={focused ? TabbarGroupPre : TabbarGroup}
                  />
                )}
              />
              {/*
            <Scene
              key="analytics"
              component={View}
              title="统计分析"
              icon={({focused}) => (
                <Image
                  style={{width: 21, height: 20}}
                  source={focused ? TabbarAnalyTicsPre : TabbarAnalyTics}
                />
              )}
              /> */}
              <Scene
                key="me"
                component={MeScreen}
                title="我的"
                icon={({focused}) => (
                  <Image
                    style={{width: 22, height: 22}}
                    source={focused ? TabbarMePre : TabbarMe}
                  />
                )}
              />
            </Tabs>
            <Scene
              hideNavBar={false}
              key="worksheet"
              component={WorksheetScreen}
              title="工单列表"
            />
            <Scene
              hideNavBar={false}
              key="video"
              component={VideoScreen}
              title="Video"
              renderRightButton={
                <Button
                  icon={{
                    name: 'ios-reverse-camera',
                    type: 'ionicon',
                    color: '#fff',
                    size: 30,
                  }}
                  type="clear"
                  onPress={() => {
                    Actions.refs.video.switchCamera();
                  }}
                />
              }
            />
            <Scene
              hideNavBar={false}
              key="sheetDetail"
              component={WorksheetDetailScreen}
              title="工单明细"
            />
            <Scene
              hideNavBar={false}
              key="addSheet"
              component={WorksheetAddScreen}
              title="代报修"
            />
            <Scene
              hideNavBar={false}
              key="customerSelector"
              component={CustomerSelector}
              title="客户查询"
            />
            <Scene
              hideNavBar={false}
              key="equipmentSelector"
              component={EquipmentSelector}
              title="设备查询"
            />
            <Scene
              hideNavBar={false}
              key="userInfoScreen"
              component={UserInfoScreen}
              title="个人信息"
            />
            <Scene
              hideNavBar={false}
              key="changePasswordScreen"
              component={ChangePasswordScreen}
              title="修改密码"
            />
            <Scene
              hideNavBar={false}
              key="changeMobile"
              component={ChangeMobile}
              title="换绑手机"
            />
          </Stack>
          <Scene key="login" component={LoginScreen} title="登录" hideNavBar />
        </Modal>
        <Scene
          key="forget"
          hideNavBar={false}
          component={ForgetScreen}
          title="找回密码"
        />
        <Scene
          key="register"
          hideNavBar={false}
          component={RegisterScreen}
          title="注册"
        />
      </Stack>
    </Router>
  );
};

export default App;
